import React, { useEffect, useState } from "react";

// 封装请求
const request = () => {
  return fetch("http://www.pudge.wang:3080/api/rated/list")
    .then((response) => response.json())
    .then((res) => {
      return res;
    });
};

const Child = () => {
  const [num, setNum] = useState(1);

  useEffect(() => {
    const timer = setInterval(() => {
      setNum((v) => v + 1);
    }, 1000);

    return () => {
      console.log("child被销毁了");
      clearInterval(timer);
    };
  }, []);

  return <div>child子组件 - {num}</div>;
};

// useEffect处理副作用的
// useEffect就是用来代替生命周期

// 没有返回值

// 1. 如果只传一个回调函数作为参数，相当于是componentDidMount以及componentDidUpdate
// 2. 如果加了第二个参数空数组, 相当于是componentDidMount
// 3. 如果第二个数组不是空数组, 相当于componentDidMount和watch监听。更像是vue3的watchEffect
// 4. constructor的内容可以直接写在函数组件的里面
// 5. 如果在第一个回调函数里面返回一个函数，那么返回的函数相当于是componentWillUnmount
const App = () => {
  console.log("constr");

  const [count, setCount] = useState(1);
  const [name, setName] = useState("zhangsan");
  const [show, setShow] = useState(true);

  // useEffect(() => {
  //   console.log("useEffect");
  // }, []);

  useEffect(() => {
    console.log("useEffect");
  }, [count, name]);

  const [list, setList] = useState([]);
  // useEffect(async () => {
  //   const res = await request();
  //   setList(res.result);
  // }, []);

  // 如果封装了请求，又想用async的话，需要写成自执行函数
  useEffect(() => {
    (async () => {
      const res = await request();
      setList(res.result);
    })();
  }, []);

  return (
    <>
      <h2>useEffect</h2>
      <p>count: {count}</p>
      <button onClick={() => setCount((v) => v + 1)}>btn</button>

      <p>name: {name}</p>
      <button onClick={() => setName("lisi")}>btn</button>

      {show && <Child />}
      <button onClick={() => setShow((v) => !v)}>btn</button>

      <ul>
        {list.map((item) => (
          <li key={item._id}>{item.title}</li>
        ))}
      </ul>
    </>
  );
};

export default App;
